<template>
  <div class="login-form">
    <template v-if="!isMsgLogin">
      <div class="toggle">
        <a @click="isMsgLogin = false"
          href="javascript:;"
          v-if="isMsgLogin">
          <i class="iconfont icon-user"></i> 使用账号登录
        </a>
        <a @click="isMsgLogin = true"
          href="javascript:;"
          v-else>
          <i class="iconfont icon-msg"></i> 使用短信登录
        </a>
      </div>
      <Form ref='target'
        class="form"
        v-slot='{ errors }'>
        <template v-if="!isMsgLogin">
          <div class="form-item">
            <div class="input">
              <i class="iconfont icon-user"></i>
              <Field v-model='form.account'
                autocomplete='off'
                type="text"
                name='account'
                :rules='schema.account'
                placeholder="请输入用户名或手机号" />
            </div>
            <div class="error"
              v-if='errors.account'><i class="iconfont icon-warning" />{{errors.account}}</div>
          </div>
          <div class="form-item">
            <div class="input">
              <i class="iconfont icon-lock"></i>
              <Field v-model='form.password'
                autocomplete='off'
                type="password"
                name='password'
                :rules='schema.password'
                placeholder="请输入密码" />
            </div>
            <div class="error"
              v-if='errors.password'><i class="iconfont icon-warning" />{{errors.password}}</div>
          </div>
        </template>
        <template v-else>
          <div class="form-item">
            <div class="input">
              <i class="iconfont icon-user"></i>
              <Field v-model='form.mobile'
                autocomplete='off'
                type="text"
                name='mobile'
                :rules='schema.mobile'
                placeholder="请输入手机号" />
            </div>
            <div class="error"
              v-if='errors.mobile'><i class="iconfont icon-warning" />{{errors.mobile}}</div>
          </div>
          <div class="form-item">
            <div class="input">
              <i class="iconfont icon-code"></i>
              <Field v-model='form.code'
                autocomplete='off'
                type="password"
                name='code'
                :rules='schema.code'
                placeholder="请输入验证码" />
              <span @click='sendCode'
                class="code">{{timer===0?'发送验证码':timer+'秒后发送'}}</span>
            </div>
            <div class="error"
              v-if='errors.code'><i class="iconfont icon-warning" />{{errors.code}}</div>
          </div>
        </template>
        <div class="form-item">
          <div class="agree">
            <!-- 通过Field组件的as属性值可以指定最终渲染为什么元素（支持组件） -->
            <Field as='XtxCheckbox'
              name='isAgree'
              :rules='schema.isAgree'
              v-model="form.isAgree" />
            <!-- <XtxCheckbox v-model="form.isAgree" /> -->
            <span>我已同意</span>
            <a href="javascript:;">《隐私条款》</a>
            <span>和</span>
            <a href="javascript:;">《服务条款》</a>
          </div>
          <div class="error"
            v-if='errors.isAgree'><i class="iconfont icon-warning" />{{errors.isAgree}}</div>
        </div>
        <a @click='handleLogin'
          href="javascript:;"
          class="btn">登录</a>
        <!-- <XtxMessage type='error' text='登录失败' /> -->
      </Form>
    </template>
    <div class="form">

      <div class="form-item">
        <div class="input">
          <i class="iconfont icon-user"></i>
          <Field v-model="form.account"
            name="account"
            type="text"
            placeholder="请输入账号" />
        </div>
        <!-- <div class="error"><i class="iconfont icon-warning" />请输入手机号</div> -->
      </div>
      <div class="form-item">
        <div class="input">
          <i class="iconfont icon-lock"></i>
          <Field v-model="form.password"
            name="password"
            type="password"
            placeholder="请输入密码" />
        </div>
      </div>
      <div class="form-item">
        <div class="input">
          <i class="iconfont icon-user"></i>
          <Field v-model="form.mobile"
            name="mobile"
            type="text"
            placeholder="请输入手机号" />
        </div>
      </div>
      <div class="form-item">
        <div class="input">
          <i class="iconfont icon-code"></i>
          <Field v-model='form.code'
            autocomplete='off'
            type="password"
            name='code'
            :rules='schema.code'
            placeholder="请输入验证码" />
          <span @click="send"
            class="code">
            {{ time > 0 ? `${time}秒后发送` : "发送验证码" }}
          </span>
        </div>
      </div>
      <div class="form-item">
        <div class="agree">
          <!-- 通过Field组件的as属性值可以指定最终渲染为什么元素（支持组件） -->
          <Field as='XtxCheckbox'
            name='isAgree'
            :rules='schema.isAgree'
            v-model="form.isAgree" />
          <span>我已同意</span>
          <a href="javascript:;">《隐私条款》</a>
          <span>和</span>
          <a href="javascript:;">《服务条款》</a>
        </div>
      </div>
      <a href="javascript:;"
        @click="submit"
        class="btn">登录</a>
    </div>

    <div class="action">
      <div class="url">
        <a href="javascript:;">忘记密码</a>
        <a href="javascript:;">免费注册</a>
      </div>
    </div>
  </div>
</template>
<script>
import { ref, watch } from 'vue'
// import { useIntervalFn } from "@vueuse/core";
// import { Form } from "vee-validate";
import schema from '@/utils/schema.js'
// import Message from '@/components/library/Message.js'
import { Field, Form } from "vee-validate";
import { useIntervalFn } from '@vueuse/core'
// import { userMobileLoginMsg } from '@/api/user.js'
export default {
  name: 'LoginForm',
  components: { Field, Form },
  setup () {
    // 是否短信登录
    const isMsgLogin = ref(false)
    // 表单信息对象
    // 表单信息对象
    const form = ref({
      isAgree: true,
      mobile: null,
      account: null,
      password: null,
      code: null,
    });
    const formCom = ref(null);
    watch(isMsgLogin, () => {
      form.value = {
        isAgree: true,
        mobile: null,
        account: null,
        password: null,
        code: null,
      };
      formCom.value.resetForm();
    });
    // 发短信
    // const send = async () => {
    //   const valid = mobile(form.value.mobile);
    //   if (valid === true) {
    //     if (!isActive.value) {
    //       await userMobileLoginMsg(form.value.mobile);
    //       Message({ type: "success", text: "发送成功" });
    //       time.value = 60;
    //       resume();
    //     }
    //   } else {
    //     formCom.value.setFieldError("mobile", valid);
    //   }
    // };
    const { account, password, mobile, code, isAgree } = schema;
    const formSchema = { account, password, mobile, code, isAgree };
    const time = ref(0);
    const { pause, } = useIntervalFn(
      () => {
        time.value--;
        if (time.value <= 0) {
          pause();
        }
      },
      1000,
      false
    );
    const submit = async () => {
      const valid = await formCom.value.validate();
      console.log(valid);
    }
    // ...
    return { isMsgLogin, form, formSchema, formCom, submit, };
  }
}
</script>
<style lang="less" scoped>
// 账号容器
.login-form {
  .toggle {
    padding: 15px 40px;
    text-align: right;
    a {
      color: var(--xtx-color);
      i {
        font-size: 14px;
      }
    }
  }
  .form {
    padding: 0 40px;
    &-item {
      margin-bottom: 28px;
      .input {
        position: relative;
        height: 36px;
        > i {
          width: 34px;
          height: 34px;
          background: #cfcdcd;
          color: #fff;
          position: absolute;
          left: 1px;
          top: 1px;
          text-align: center;
          line-height: 34px;
          font-size: 18px;
        }
        input {
          padding-left: 44px;
          border: 1px solid #cfcdcd;
          height: 36px;
          line-height: 36px;
          width: 100%;
          &.error {
            border-color: var(--price-color);
          }
          &.active,
          &:focus {
            border-color: var(--xtx-color);
          }
        }
        .code {
          position: absolute;
          right: 1px;
          top: 1px;
          text-align: center;
          line-height: 34px;
          font-size: 14px;
          background: #f5f5f5;
          color: #666;
          width: 90px;
          height: 34px;
          cursor: pointer;
        }
      }
      > .error {
        position: absolute;
        font-size: 12px;
        line-height: 28px;
        color: var(--price-color);
        i {
          font-size: 14px;
          margin-right: 2px;
        }
      }
    }
    .agree {
      a {
        color: #069;
      }
    }
    .btn {
      display: block;
      width: 100%;
      height: 40px;
      color: #fff;
      text-align: center;
      line-height: 40px;
      background: var(--xtx-color);
      &.disabled {
        background: #cfcdcd;
      }
    }
  }
  .action {
    padding: 20px 40px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .url {
      a {
        color: #999;
        margin-left: 10px;
      }
    }
  }
}
</style>